<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="page flex center index" id="index">
            <img class="tree" src="images/top_left_tree.png" alt="" />
            <img class="flower" src="images/flower.png" alt="" />
            <img class="lantern" src="images/lantern.png" alt="" />
            <div class="moon-box flex center animate__animated animate__fadeInUp animate__slower">
                <img class="moon animate__animated animate__slower animate__delay-3s rotateHide animate__slower" src="images/moon.png" alt="" />
                <img class="moon-cake animate__animated animate__slower animate__delay-3s rotateShow animate__slower" src="images/moon_cake1.png" alt="" style="display: block;" />
                <img class="moon-cake" id="moonCake1" src="images/moon_cake1.png" alt="" />
                <img class="moon-cake" id="moonCake2" src="images/moon_cake2.png" alt="" />
                <img class="moon-cake" id="moonCake3" src="images/moon_cake3.png" alt="" />
                <img class="moon-cake" id="moonCakeTap0" src="images/moon_cake_gap0.png" alt="" />
                <img class="moon-cake" id="moonCakeTap1" src="images/moon_cake_gap1.png" alt="" />
                <img class="moon-cake" id="moonCakeTap2" src="images/moon_cake_gap2.png" alt="" />
                <img class="moon-cake" id="moonCakeTap3" src="images/moon_cake_gap3.png" alt="" />
            </div>
            <img class="station" src="images/bottom_station.png" alt="" />
            <img class="rabbit animate__animated animate__delay-5s animate__fadeOut" src="images/bottom_rabbit.png" alt="" />
            <img class="click-text animate__animated animate__fadeIn" src="images/click_text.png" alt="" />
            <img class="point animate__animated animate__fadeRound animate__infinite animate__slow" src="images/point_icon.png" alt="" />
        </div>

        <div class="page flex center content" id="record">
            <img class="tree-content" src="images/top_left_tree_content.png" alt="" />
            <div class="poster-make-box">
                <img class="poster-card" src="" alt="" />
                <p>再次录音可覆盖原语音祝福</p>
                <div class="record-btn-box flex">
                    <div class="record-btn"></div>
                    <img class="playing-icon" src="images/playing_icon.png" alt="" />
                    <div class="play-btn"></div>
                </div>
                <div class="make-poster-btn"><img src="images/make_poster_text.png" width="100%" alt="" /></div>
            </div>
            <div class="recording-box">
                <img class="record-sound" src="images/record_sound_img.png" alt="" />
                <div class="recording-timer">正在录制,剩余<span id="timer">30</span>秒</div>
                <p>松手即可退出录制</p>
            </div>
        </div>

        <div class="page poster" id="poster">
            <img id="posterSuccess" src="" width="100%" alt="" />
            <img class="poster-share" src="images/poster_share_text.png" alt="" />
            <div id="postContent">
                <img id="posterImg" src="images/poster_img1.jpg" width="100%" alt="" />
                <div class="poster-bottom flex">
                    <div class="poster-bottom-box">
                        <img class="bg" src="images/poster_bottom_img.png" alt="" />
                        <img class="qr-code" src="images/qr_img.png" alt="" />
                        <img class="user-img" src="images/user_demo_img.jpg" alt="" />
                        <div class="user-name">孟毛毛</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page center index share" id="share">
            <img class="tree1" src="images/top_left_tree1.png" alt="" />
            <img class="flower" src="images/flower.png" alt="" />
            <img class="lantern1" src="images/lantern1.png" alt="" />
            <img class="station" src="images/bottom_station.png" alt="" />
            <img class="share-point" src="images/share_point.png" alt="" />
            <img class="share-text" src="images/share_text.png" width="100%" alt="" />
        </div>


        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript" src="js/html2canvas.min.js"></script>
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script type="text/javascript">
            // wx.config({
            //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //     appId: '', // 必填，公众号的唯一标识
            //     timestamp: Math.random(), // 必填，生成签名的时间戳
            //     nonceStr: '', // 必填，生成签名的随机串
            //     signature: '',// 必填，签名
            //     jsApiList: ['startRecord','stopRecord','playVoice','onVoicePlayEnd'] // 必填，需要使用的JS接口列表
            // });

            $(document).ready(function (e) {
                $('.make-poster-btn').click(function (e) {
                    $('#record').removeClass('show');
                    $('#poster').show();
                    setTimeout(function () {
                        html2canvas(document.querySelector("#poster")).then(canvas => {
                            $('#posterSuccess').attr('src',canvas.toDataURL("image/png"));
                            $('#postContent').hide();
                        });
                    },500);
                })

                let localId;
                let isRecording = false;
                let recordTimer;
                let recordTimerNum = 30;
                document.addEventListener('touchend',touchendFun);
                function touchendFun(e) {
                    if (!isRecording) return;
                    console.log('touch end!!');
                    // wx.stopRecord({
                    //     success: function (res) {
                    //         localId = res.localId;
                    //     }
                    // });
                    isRecording = false;
                    setTimeout(function () {
                        $('.record-btn').removeClass('recording');
                        $('.poster-make-box').show();
                        $('.recording-box').removeClass('show');
                        clearInterval(recordTimer);
                        recordTimerNum = 30;
                        $('#timer').html(recordTimerNum);
                    },500);
                }

                $('.play-btn').bind('touchstart',function (e) {
                    e.preventDefault();
                    $(this).addClass('playing');
                    $('.playing-icon').show();
                    setTimeout(function (){
                        $('.play-btn').removeClass('playing');
                        $('.playing-icon').hide();
                    },3000);
                    // wx.playVoice({
                    //     localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                    // });
                    // wx.onVoicePlayEnd({
                    //     success: function (res) {
                    //         var localId = res.localId; // 返回音频的本地ID
                    //         $(this).removeClass('playing');
                    //     }
                    // });
                })

                $('.record-btn').bind('touchstart',function (e) {
                    e.preventDefault();
                    isRecording = true;
                    //wx.startRecord();
                    $(this).addClass('recording');
                    setTimeout(function (){
                        $('.poster-make-box').hide();
                        $('.recording-box').addClass('show');
                        recordTimer = setInterval(function () {
                            if (recordTimerNum == 0) touchendFun();
                            recordTimerNum --;
                            $('#timer').html(recordTimerNum);
                        },1000);
                    },500);
                })

                let moonCakeNum = 0;
                let moonCakeRound;
                let moonCakeTapShow = false;
                let moonCakeTapPostShow = false;
                setTimeout(function () {
                    setTimeout(function () {
                        moonCakeTapShow = true;
                        setTimeout(function () {
                            moonCakeTapShow = false
                            moonCakeTapPostShow = true;
                            $('.click-text').show();
                            $('.point').show();
                            $('.moon-box').bind('click', moonClickFun)
                        },1000);
                    },1000);

                    moonCakeRound = setInterval(function () {
                        moonCakeNum == 3?moonCakeNum=1:moonCakeNum++;
                        $('.moon-cake').hide();
                        $('#moonCake'+moonCakeNum).show();
                        if (moonCakeTapShow) $('#moonCakeTap0').show();
                        if (moonCakeTapPostShow) $('#moonCakeTap'+moonCakeNum).show();
                    },500);
                },6000)

                function moonClickFun(e) {
                    clearInterval(moonCakeRound);
                    $('.click-text').hide();
                    $('.point').hide();
                    setTimeout(function () {
                        $('#index').hide();
                        $('#record').addClass('show');
                        $('.poster-card').attr('src','images/poster_card'+ moonCakeNum +'.png');
                        $('#posterImg').attr('src','images/poster_img'+ moonCakeNum +'.jpg');
                    },1000);
                }
            });
        </script>
	</body>
</html>
